<template>
    <div class="login-banner">

        <el-form ref="loginForm"
                 :model="user"
                 class="login-main">
            <div class="login-box">
                <img src="../../src/assets/img/logo_black.png" style="width: 160px;margin-bottom: 20px;">
                <el-tabs v-model="activeWindow" type="card" stretch>

                    <el-tab-pane label="登录" name="login">
                        <br>
                        <div class="login-form" style="background: none; margin-top: 15px;">
                            <el-form-item prop="username">
                                <el-input prefix-icon="el-icon-user" type="text" auto-complete="false" v-model="user.username"
                                          placeholder="请输入账号"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false" v-model="user.password"
                                          placeholder="请输入密码"></el-input>
                            </el-form-item>
                            &nbsp;
                            <el-link class="am-fr" href="/forgetPassword" target="_self"
                                     :underline="false">忘记密码
                            </el-link>
                            <br>
                            <br/>
                            <el-button type="primary" class="am-cf" @click="signIn">登录</el-button>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="注册" name="register">
                        <div class="login-form" style="background: none; margin-top: 15px;">
                            <el-form-item prop="username">
                                <el-input prefix-icon="el-icon-user" type="text" auto-complete="false"
                                          v-model="user.username"
                                          placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false"
                                          v-model="user.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
<!--                            <el-form-item prop="email">-->
<!--                                <el-input prefix-icon="el-icon-message" type="text" auto-complete="false"-->
<!--                                          v-model="user.email" placeholder="请输入邮箱"></el-input>-->
<!--                            </el-form-item>-->
                          <el-form-item prop="phone">
                            <el-input prefix-icon="el-icon-message" type="text" auto-complete="true"
                                      v-model="user.phone" placeholder="请输入手机号"></el-input>
                          </el-form-item>
                            <el-form-item prop="code" :inline="true">
                                <el-input prefix-icon="el-icon-chat-dot-square" type="text"
                                          style="width: 180px;margin-right: 18px" auto-complete="false"
                                          v-model="user.code" placeholder="验证码"></el-input>
                                <el-button v-if="showButton" type="primary" @click="captcha">发送验证码</el-button>
                                <el-button v-else type="primary" :disabled="true">请稍等{{count}}秒</el-button>
                            </el-form-item>

                            <el-button type="primary" class="am-cf" @click="register">立即注册</el-button>
                        </div>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>

    </div>

</template>

<script>
    import {login, sendMail, register} from "../assets/api/userApi";
    import App from "../App";

    export default ({
        data() {
            return {
                user: {
                    username: '',
                    password: '',
                    // email: '',
                  phone:'',
                    code: '',
                    userImg: '',
                    userId:''
                },
                showButton: true,
                timer: null,
                count: 0,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名的长度在3~10个字符之间', trigger: 'blur'}],
                    password: {required: true, message: '请输入密码', trigger: 'blur'},
                    // email: {required: true, message: '请输入邮箱', trigger: 'blur'},
                  phone: {required: true, message: '请输入手机号', trigger: 'blur'},

                  code: {required: true, message: '请输入验证码', trigger: 'blur'},
                },
                activeWindow: 'login'
            }
        },

        methods: {
            signIn() {
                login(this.user).then((res) => {
                    if (res.code === 200) {
                        localStorage.setItem('userId',res.data.userId);
                        localStorage.setItem('token', res.tokenValue);
                        localStorage.setItem('username', this.user.username);
                        this.$message.success('登录成功');
                    this.$router.push('/');
                } else this.$message.error(res.message);

            }).catch(error => {
                    console.log(error);
                })
            },

            register() {
                register(this.user).then((res) => {
                    if (res.code === 200) {
                        this.$message.success(res.message);
                        this.activeWindow = 'login';
                    } else if (res.code === -10){
                        this.$message.error(res.message);
                    } else {
                        // this.$message.error("邮箱已被注册！")
                      this.$message.error("手机已被注册！")
                    }
                })
            },

            captcha() {
                sendMail(this.user).then((res) => {
                    let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    if (!regEmail.test(this.user.email)) {
                        this.$message.error("请输入正确的邮箱格式！");
                    } else if (res.code === 200) {
                        this.countDown();
                        this.$message.success(res.message);
                    } else {
                        this.$message.error(res.message);
                    }
                })
            },
            countDown() {
                const TimeCount = 60;
                if (!this.timer) {
                    this.showButton = false;
                    this.count = TimeCount;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TimeCount) {
                            this.count--;
                        } else {
                            clearInterval(this.timer);
                            this.showButton = true;
                            this.timer = null;
                        }
                    }, 1000);
                }
            },
        }
    });
</script>

<style scoped>
    @import "../assets/css/dlstyle.css";
    @import "../assets/css/amazeui.css";
    @import "../assets/css/bootstrap.css";

</style>
